import {Button, Image, View} from 'react-native';
import Nettext from './DemoHelloWorld';

import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
import {createStackNavigator} from '@react-navigation/stack';
import Icon from 'react-native-vector-icons/AntDesign';
import FontAwesome from 'react-native-vector-icons/FontAwesome';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import IconsScreen from './IconScreen';
import AntDesign from 'react-native-vector-icons/AntDesign';
//import {MaterialCommunityIcons} from '@expo/vector-icons';
const BottomTab = createBottomTabNavigator();
const Stack = createStackNavigator();
const nav = BottomTab;

const IconPen = require('../resources/icons/pen.jpg');
const IconTask = require('../resources/icons/task.jpg');
import '../utils/myglobal.js';
import AccountBase from './AccountBase';
import ChainInfo from './ChainInfo';
import BlockInfo from './BlockInfo';
import mystyles from './mystyles';
import DemoHelloWorld from './DemoHelloWorld';
import React from 'react';
import DemoSimpleInfo from './DemoSimpleInfo';

export function NavStack() {
  return (
    <NavigationContainer>
      <nav.Navigator
        initialRouteName="Contract"
        screenOptions={{
          tabBarActiveTintColor: '#22AAFF',
        }}>
        <nav.Screen
          name="Contract"
          component={ContractScreen}
          options={{
            tabBarLabel: '合约',
            headerTitle: '合约',
            tabBarIcon: ({focused}) => (
              <Image
                source={require('../resources/icons/book.png')}
                style={{
                  width: 36,
                  height: 36,
                }}
              />
            ),
            //tabBarBadge: '99+',
          }}
        />
        <nav.Screen
          name="Settings"
          component={SettingsScreen}
          options={{
            tabBarLabel: '配置',
            headerTitle: '配置',
            tabBarIcon: ({focused}) => (
              <Image
                source={focused ? IconPen : IconTask}
                style={{
                  width: 32,
                  height: 32,
                }}
              />
            ),
            //tabBarBadge: 3,
          }}
        />
        {/*
        <nav.Screen
          name="icons"
          component={IconsScreen}
          options={{
            headerTitle: '图标资源展示',
            tabBarLabel: '图标',
            tabBarIcon: ({focused, color, size}) => (
              <AntDesign
                name="codepen-circle"
                size={32}
                color={focused ? color : '#5555DD'}
              />
            ),
            //tabBarBadge: 3,
          }}
        />*/}
      </nav.Navigator>
    </NavigationContainer>
  );
}

function ContractScreen({navigation}) {
  return (
    <View style={mystyles.navtab}>
      {/* 显示当前屏幕内容 */}
      {/* 添加导航操作按钮 */}
      <BlockInfo tabname={'ContractTab'} />
      <View style={mystyles.separator}></View>
      <DemoHelloWorld />
      <View style={mystyles.separator}></View>
      <DemoSimpleInfo />
      {/*
      <Button
        title="Go to Settings"
        onPress={() => navigation.navigate('Settings')}
      />*/}
    </View>
  );
}

function SettingsScreen({navigation}) {
  return (
    <View style={mystyles.navtab}>
      <AccountBase />
      <View style={mystyles.separator} />
      <BlockInfo tabname={'AccountTab'} />
      <View style={mystyles.separator} />
      <ChainInfo />

      {/* 显示当前屏幕内容 */}
      {/* 添加导航操作按钮 */}
      {/*
      <Button
        title="Go back to Home"
        onPress={() => {
          navigation.navigate('Home');
        }}
      />*/}
    </View>
  );
}

/*tabBarLabel：设置选项卡的文本标签。

tabBarIcon：设置选项卡的图标。

tabBarAccessibilityLabel：设置选项卡的辅助功能标签。

tabBarTestID：设置选项卡的测试标识符。

tabBarVisible：控制选项卡的可见性。

tabBarButton：自定义选项卡按钮的外观和行为。

tabBarStyle：设置选项卡栏的样式。

tabBarItemStyle：设置选项卡项的样式。

tabBarLabelStyle：设置选项卡标签的样式。

tabBarIconStyle：设置选项卡图标的样式。

tabBarBadge：显示选项卡的徽章。

tabBarBadgeStyle：设置选项卡徽章的样式。

tabBarInactiveTintColor：设置非活动选项卡的文本和图标颜色。

tabBarActiveTintColor：设置活动选项卡的文本和图标颜色。

tabBarInactiveBackgroundColor：设置非活动选项卡的背景颜色。

tabBarActiveBackgroundColor：设置活动选项卡的背景颜色。*/
